<template>
  <div>
    <!-- table -->
    <a-card style="overflow: scroll;">
      <a-table
        :columns="columns"
        :dataSource="data"
        :pagination="false"
        style="width:100%;"
        :loading="memberLoading"
      >
        <template slot="order_id" slot-scope="text, record">
          <ul>
            <li>{{text}}</li>
            <dl class="more-info">
              <dt>{{ $t('verifyWithDraw.xgxx') }}</dt>
              <dd>{{ $t('verifyWithDraw.rwze') }}: {{record.money_task}}</dd>
              <dd>{{ $t('verifyWithDraw.xjcz') }}: {{record.money_sub_recharge}}</dd>
              <dd>{{ $t('verifyWithDraw.txcs') }}: {{record.withdraw_cnt}}</dd>
              <dd>{{ $t('verifyWithDraw.txze') }}: {{record.withdraw_money}}</dd>
              <dd>{{ $t('verifyWithDraw.czze') }}: {{record.recharge_money}}</dd>
              <dd>
                <span style="color:red;" v-if="record.recharge_money<record.withdraw_money">
                  {{ $t('verifyWithDraw.yj') }}
                </span>
              </dd>
            </dl>
          </ul>
        </template>
        <template slot="imgs" slot-scope="text">
          <template>
            <div v-if="text">
              <img v-for="item in text.split(',')" @click="handleClickReview($hostServer+item)" class="table-img" :src="$hostServer+item" alt=""/>
            </div>
            <div v-else>-</div>
          </template>
        </template>
        <template slot="bank" slot-scope="text, record">
          <ul>
            <li v-if="record.bankinfo_bank_name">
              <dl>
                <dt>{{ $t('verifyWithDraw.yxkxx') }}</dt>
                <dd>
                  {{record.bankinfo_bank_name}}
                  {{record.bankinfo_name}}
                  {{record.bankinfo_number}}
                </dd>
              </dl>
            </li>
            <li v-if="record.alipay_account">
              <dl>
                <dt>{{ $t('verifyWithDraw.zfbxx') }}</dt>
                <dd>{{record.alipay_account}}</dd>
                <dd>{{record.alipay_name}}</dd>
              </dl>
            </li>
          </ul>
        </template>
        <template slot="operation" slot-scope="text, record">
          <span>
            <a @click="handleClickVerifySuccess(record.id)">{{ $t('verifyWithDraw.tg') }}</a>
            <a-divider type="vertical" />
            <a style="color:red;" @click="handleClickVerifyFail(record.id)">{{ $t('verifyWithDraw.jj') }}</a>
          </span>
        </template>
      </a-table>
    </a-card>
    <a-modal title="$t('verifyWithDraw.jjyy')" v-model="showInputDialog" @ok="handleInputDialogOk">
      <p>
        <a-input v-model="refuse_content" placeholder="$t('verifyWithDraw.qsr')..." />
      </p>
    </a-modal>
    <DialogImg :img_url="curr_img_url" :is_show="curr_img_show"/>
  </div>
</template>

<script>
import { mixin, mixinDevice } from '@/utils/mixin'
import DialogImg from '../../components/DialogImg'

export default {
  name: 'WithDraw',
  mixins: [mixin, mixinDevice],
  components: {
    DialogImg
  },
  data () {
    return {
      curr_img_url: '',
      curr_img_show: false,
      description: this.$t('verifyWithDraw.txxgcz'),
      loading: false,
      memberLoading: false,
      curr_id: '',
      // table
      columns: [
        {
          title: this.$t('verifyWithDraw.ddh'),
          dataIndex: 'order_id',
          key: 'order_id',
          scopedSlots: { customRender: 'order_id' }
        },
        {
          title: this.$t('verifyWithDraw.skrxx'),
          dataIndex: 'bankinfo_bank_name',
          key: 'bankinfo_bank_name',
          scopedSlots: { customRender: 'bank' }
        },
        {
          title: this.$t('verifyWithDraw.lx'),
          dataIndex: 'belong',
          key: 'belong',
          scopedSlots: { customRender: 'belong' }
        },
        {
          title: this.$t('verifyWithDraw.ssyh'),
          dataIndex: 'username',
          key: 'username',
          scopedSlots: { customRender: 'username' }
        },
        {
          title: this.$t('verifyWithDraw.je'),
          dataIndex: 'money',
          key: 'money',
          scopedSlots: { customRender: 'money' }
        },
        {
          title: this.$t('verifyWithDraw.ly'),
          dataIndex: 'content',
          key: 'content',
          scopedSlots: { customRender: 'content' }
        },
        {
          title: this.$t('verifyWithDraw.sj'),
          dataIndex: 'created_at',
          key: 'created_at',
          scopedSlots: { customRender: 'created_at' }
        },
        {
          title: this.$t('verifyWithDraw.cz'),
          key: 'action',
          scopedSlots: { customRender: 'operation' }
        }
      ],
      data: [],
      errors: [],
      showInputDialog: false,
      refuse_content: ''
    }
  },
  created () {
    this.getList()
  },
  methods: {
    handleInputDialogOk () {
      this.showInputDialog = false
      this.$http.post('/verify/withdraw_fail', this.$qs.stringify({
        id: this.curr_id,
        content: this.refuse_content
      })).then(res => {
        if (res.code === 0) {
          this.$notification.success({
            message: this.$t('verifyWithDraw.cg'),
            description: res.msg
          })
          this.getList()
        } else {
          this.$notification.error({
            message: this.$t('verifyWithDraw.sb'),
            description: res.msg
          })
        }
      }).catch(err => {
        this.$notification.error({
          message: this.$t('verifyWithDraw.sb'),
          description: err.message
        })
      })
    },
    getList () {
      this.$http.get('/verify/withdraw_list').then(res => {
        this.data = res
      }).catch(err => {
        this.$notification.error({
          message: this.$t('verifyWithDraw.sb'),
          description: err.message
        })
      })
    },
    handleSubmit (e) {
      e.preventDefault()
    },
    handleClickVerifySuccess (id) {
      this.$http.post('/verify/withdraw_success', this.$qs.stringify({
        id: id
      })).then(res => {
        if (res.code === 0) {
          this.$notification.success({
            message: this.$t('verifyWithDraw.cg'),
            description: res.msg
          })
          this.getList()
        } else {
          this.$notification.error({
            message: this.$t('verifyWithDraw.sb'),
            description: res.msg
          })
        }
      }).catch(err => {
        this.$notification.error({
          message: this.$t('verifyWithDraw.sb'),
          description: err.message
        })
      })
    },
    handleClickVerifyFail (id) {
      this.curr_id = id
      this.showInputDialog = true
    },
  }
}
</script>

<style lang="less" scoped>
  .card{
    margin-bottom: 24px;
  }
  .popover-wrapper {
    /deep/ .antd-pro-pages-forms-style-errorPopover .ant-popover-inner-content {
      min-width: 256px;
      max-height: 290px;
      padding: 0;
      overflow: auto;
    }
  }
  .antd-pro-pages-forms-style-errorIcon {
    user-select: none;
    margin-right: 24px;
    color: #f5222d;
    cursor: pointer;
    i {
          margin-right: 4px;
    }
  }
  .antd-pro-pages-forms-style-errorListItem {
    padding: 8px 16px;
    list-style: none;
    border-bottom: 1px solid #e8e8e8;
    cursor: pointer;
    transition: all .3s;

    &:hover {
      background: #e6f7ff;
    }
    .antd-pro-pages-forms-style-errorIcon {
      float: left;
      margin-top: 4px;
      margin-right: 12px;
      padding-bottom: 22px;
      color: #f5222d;
    }
    .antd-pro-pages-forms-style-errorField {
      margin-top: 2px;
      color: rgba(0,0,0,.45);
      font-size: 12px;
    }
  }
  .more-info{
    border: thin dashed #ccc;
    padding: 5px;
    border-radius: 5px;
  }
</style>
